<template>
	<view>
		<view class="box">
			<view class="formBox">
				<view class="left">商家类型</view>
				<view class="right">
					<uni-data-select v-model="formData.storeType" :localdata="selectFange"
						@change="rangeChange"></uni-data-select>
				</view>
			</view>
			<view class="formBox">
				<view class="left">
					<text class="red">*</text>
					店铺名称
				</view>
				<view class="right rBorder">
					<input type="text" v-model="formData.storeName" placeholder="请输入" />
				</view>
			</view>
			<view class="formBox">
				<view class="left">
					<text class="red">*</text>
					联系人
				</view>
				<view class="right rBorder">
					<input type="text" v-model="formData.userName" placeholder="请输入" />
				</view>
			</view>
			<view class="formBox">
				<view class="left">
					<text class="red">*</text>
					联系电话
				</view>
				<view class="right rBorder">
					<input type="text" v-model="formData.mobile" placeholder="请输入" />
				</view>
			</view>
			<view class="formBox">
				<view class="left">
					<text class="red">*</text>
					{{formData.storeType?'门店地区':'厂家地区'}}
				</view>
				<view class="right rBorder" @click.stop="showMulLinkageThreePicker">
					<input type="text" placeholder="选择省市区" v-model="selectCity" disabled="true"
						style="pointer-events: none;" />
				</view>
			</view>
			<view class="formBox" v-if="formData.storeType">
				<view class="left">
					<text class="red">*</text>
					营业类型
				</view>
				<view class="right rBorder">
					<picker class="" @change="changeSelect($event)" :range="classify_data_name">
						<view class="certification_head_body_item d-b-c">
							<view class="input-box flex-1" v-if="classify_data_name_active">
								{{ classify_data_name_active }}
							</view>
							<view class="make-item input-box flex-1" style="color: #777777;" v-else>
								选择营业类型
							</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="formBox">
				<view class="left">
					<text v-if="!formData.storeType" class="red">*</text>
					{{formData.storeType?'营业执照':'商家营业执照'}}
				</view>
				<view class="right">
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('businessImg')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="formData.businessImg" class="img">
									<image :src="formData.businessImg" mode="aspectFit"></image>
								</view>
								<view v-else>点击上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formBox" v-if="!formData.storeType">
				<view class="left">
					<text class="red">*</text>
					生产许可证
				</view>
				<view class="right">
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('productionLicense')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="formData.productionLicense" class="img">
									<image :src="formData.productionLicense" mode="aspectFit"></image>
								</view>
								<view v-else>点击上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formBox" v-if="!formData.storeType">
				<view class="left">品牌注册证书或授权证书</view>
				<view class="right">
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('brandRegImg')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="formData.brandRegImg" class="img">
									<image :src="formData.brandRegImg" mode="aspectFit"></image>
								</view>
								<view v-else>点击上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formBox" v-if="!formData.storeType">
				<view class="left">质检报告</view>
				<view class="right">
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('qualityReportImg')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="formData.qualityReportImg" class="img">
									<image :src="formData.qualityReportImg" mode="aspectFit"></image>
								</view>
								<view v-else>点击上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formBox">
				<view class="left">其他证书</view>
				<view class="right">
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('otherLicenseImg')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="formData.otherLicenseImg" class="img">
									<image :src="formData.otherLicenseImg" mode="aspectFit"></image>
								</view>
								<view v-else>点击上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formBox">
				<view class="left">{{formData.storeType?'门店简介':'企业简介'}}</view>
				<view class="right rBorder">
					<input type="text" v-model="formData.introduction" placeholder="请输入" />
				</view>
			</view>
			<view class="formBox">
				<view class="left">备注</view>
				<view class="right rBorder">
					<input type="text" v-model="formData.remark" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="tailfloat">
			<button type="primary" @click="onWayAdd">提交</button>
		</view>
		<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
			:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
		<Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">上传图片</Upload>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import Upload from '@/components/upload/upload';
	export default {
		components: {
			mpvueCityPicker,
			Upload
		},
		data() {
			return {
				selectCity: '',
				provinceId: 0,
				cityId: 0,
				regionId: 0,
				province: [],
				city: [],
				area: [],
				is_load: false,
				cityPickerValueDefault: [0, 0, 0],
				formData: {
					storeType: 0
				},
				selectFange: [{
						value: 0,
						text: "线上供应链合作商家"
					},
					{
						value: 1,
						text: "同城精选线下",
						disable: true
					},
				],
				isupload: false, //上传
				type: 'frontid',

				classify_data_name: '', //列表名字
				classify_data_id: '', //列表id
				classify_data_name_active: '', //当前选中的列表名字
				classify_data_id_active: '', //当前选中的列表id

			}
		},
		onLoad(option) {},
		onShow() {},
		created() {
			this.getData();
			this.get_classify()
		},
		methods: {
			// 获取省市区
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				let self = this;
				self._post('settings/getRegion', {}, function(res) {
					self.province = res.data[0];
					self.city = res.data[1];
					self.area = res.data[2];
					self.is_load = true;
					uni.hideLoading();
				});
			},
			rangeChange(e) {
				console.log('选择门店类型', e);
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},

			/*确定选择的省市区*/
			onConfirm(e) {
				this.selectCity = e.label.replace(/,/g, "-");;
				this.provinceId = e.cityCode[0];
				this.cityId = e.cityCode[1];
				this.regionId = e.cityCode[2];
				console.log(e);
			},
			/*上传*/
			openUpload(e) {
				this.type = e;
				this.isupload = true;
			},
			/*获取图片*/
			getImgsFunc(e) {
				console.log(e);
				if (e != null && e.length > 0) {
					switch (this.type) {
						case 'businessImg':
							this.formData.businessImg = e[0].filePath;
							break;
						case 'productionLicense':
							this.formData.productionLicense = e[0].filePath;
							break;
						case 'brandRegImg':
							this.formData.brandRegImg = e[0].filePath;
							break;
						case 'qualityReportImg':
							this.formData.qualityReportImg = e[0].filePath;
							break;
						case 'otherLicenseImg':
							this.formData.otherLicenseImg = e[0].filePath;
							break;
						default:
							this.image_frontid_path = e[0].filePath;
							break;
					}
				}
				this.isupload = false;
			},

			//获取分类
			get_classify() {
				let self = this;
				self._post('supplier/apply/category', {}, function(res) {
					let list_name = [];
					let list_id = [];
					//合成select列表
					for (var i = 0; i < res.data.list.length; i++) {
						list_name.push(res.data.list[i].name);
					}
					//合成上传所需id数组
					for (var i2 = 0; i2 < res.data.list.length; i2++) {
						list_id.push(res.data.list[i2].categoryId);
					}
					self.classify_data_name = list_name;
					self.classify_data_id = list_id;
					self.smsOpen = res.data.smsOpen;
				});
			},
			//选择分类
			select() {
				let self = this;
				uni.showActionSheet({
					itemList: self.classify_data_name,
					success: function(res) {
						self.classify_data_name_active = self.classify_data_name[res.tapIndex];
						self.classify_data_id_active = self.classify_data_id[res.tapIndex];
					},
					fail: function(res) {}
				});
			},
			/* 下拉框 */
			changeSelect(e) {
				this.classify_data_id_active = this.classify_data_id[e.detail.value];
				this.classify_data_name_active = this.classify_data_name[e.detail.value];
			},
			onWayAdd() {
				if (!this.formData.storeName) {
					uni.showToast({
						title: '店铺昵称不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.formData.userName) {
					uni.showToast({
						title: '联系人不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.formData.mobile) {
					uni.showToast({
						title: '联系电话不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.formData.businessImg) {
					uni.showToast({
						title: '营业执照不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.formData.productionLicense) {
					uni.showToast({
						title: '生产许可证不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.selectCity) {
					uni.showToast({
						title: '请选择厂家地区',
						icon: 'none'
					})
					return
				}
				this.onWaySubmit();
			},

			onWaySubmit() {
				let that = this;
				let params = {}
				params = that.formData
				//省市区
				params.provinceId = that.provinceId
				params.cityId = that.cityId
				params.areald = that.regionId
				const parts = that.selectCity.split('-');
				params.provinceName = parts[0]
				params.cityName = parts[1]
				params.areaName = parts[2]
				params.password = '123456'
				console.log(params);
				that._postBody('supplier/apply/index', params, function(res) {
					that.showSuccess(
						res.msg,
						function() {
							that.gotoPage('/pages/shop/application_status');
						},
						null,
						function() {
							uni.hideLoading();
						}
					);
				});
			},

		}

	}
</script>

<style lang="scss" scoped>
	.tailfloat {
		position: fixed;
		z-index: 10;
		width: 100%;
		background-color: #FFF;
		bottom: 0;
		padding: 5rpx 0;
	}

	.box {
		margin: 20rpx 30rpx;
		padding-bottom: 120rpx;

		.rBorder {
			border: 1px solid #e5e5e5;
			box-sizing: border-box;
			border-radius: 4px;
			padding-left: 10px;
			position: relative;
			display: flex;
			-webkit-user-select: none;
			user-select: none;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 35px;

			::v-deep .uni-input-input {
				font-size: 28rpx;
			}

			::v-deep .input-placeholder {
				font-size: 22rpx;
			}

			.make-item {
				font-size: 22rpx;
			}
		}

		.formBox {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.left {
				width: 200rpx;
				margin-right: 30rpx;
			}

			.right {
				flex: 1;
			}

			.login_index_updata_updata {
				height: 200rpx;
				width: 200rpx;
				margin-top: 35rpx;

				.login_index_updata_updata_item2 {
					width: 100%;
					height: 100%;
					border: 1px solid #e5e5e5;
					border-radius: 15rpx;
					text-align: center;

					.login_index_updata_updata_item_body {
						height: 100%;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;

						.img image {
							width: 200rpx;
							height: 200rpx;
							position: relative;
						}
					}
				}
			}

			.certification_head_body_item {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx !important;

				.certification_head_body_item view {
					margin-right: 10rpx;
				}

				.icon-jiantou {
					float: right;
				}
			}
		}
	}
</style>